<template>
  <div>
    <e-tag></e-tag>
    <div class="demo-inner-divider">radio</div>
    <div class="radio" >
      <div >
        <p>禁用</p>
        <e-radio
          label="禁用"
          disabled>
        </e-radio>
      </div>
      <div>
        <p>可用</p>
        <e-radio
          label="可用"
          v-model="single"></e-radio>
      </div>
      <div>
        <p>选中禁用</p>
        <e-radio
          label="选中禁用"
          v-model="single"
          disabled>
        </e-radio>
      </div>
      <div>
        <p>选中</p>
        <e-radio
          label="选中"
          v-model="single">
        </e-radio>
      </div>
    </div>
    <div class="demo-inner-divider">raido 组</div>
    <div class="radio">
      <div >
        <p>radio组</p>
        <e-radio-group v-model="disabledGroup">
          <e-radio
            label="金斑蝶"
            disabled></e-radio>
          <e-radio label="爪哇犀牛"></e-radio>
          <e-radio label="印度黑羚"></e-radio>
        </e-radio-group>
      </div>
      <div>
        <p>radio组按钮</p>
        <e-radio-group
          v-model="button1"
          type="button">
          <e-radio label="北京"></e-radio>
          <e-radio label="上海"></e-radio>
          <e-radio label="深圳"></e-radio>
          <e-radio label="杭州"></e-radio>
        </e-radio-group>
      </div>
      <!-- <div>
        <p>radio组按钮-填底的按钮样式</p>
        <e-radio-group
          v-model="button1"
          button-style="solid"
          type="button">
          <e-radio label="北京"></e-radio>
          <e-radio label="上海"></e-radio>
          <e-radio label="深圳"></e-radio>
          <e-radio label="杭州"></e-radio>
        </e-radio-group>
      </div> -->
    </div>
    <div class="demo-inner-divider">radio按钮组-大中小</div>
    <div class="radio" >
      <div>
        <p>radio组按-大</p>
        <e-radio-group
          v-model="button1"
          size="large"
          type="button">
          <e-radio label="北京"></e-radio>
          <e-radio label="上海"></e-radio>
          <e-radio label="深圳"></e-radio>
          <e-radio label="杭州"></e-radio>
        </e-radio-group>
      </div>
      <div>
        <p>radio组按-中（基础）</p>
        <e-radio-group
          v-model="button1"
          type="button">
          <e-radio label="北京"></e-radio>
          <e-radio label="上海"></e-radio>
          <e-radio label="深圳"></e-radio>
          <e-radio label="杭州"></e-radio>
        </e-radio-group>
      </div>
      <div>
        <p>radio组按-小</p>
        <e-radio-group
          v-model="button1"
          size="small"
          type="button">
          <e-radio label="北京"></e-radio>
          <e-radio label="上海"></e-radio>
          <e-radio label="深圳"></e-radio>
          <e-radio label="杭州"></e-radio>
        </e-radio-group>
      </div>
    </div>
    <!-- <div class="demo-inner-divider">raido组-显示边框</div>
    <div class="radio">
      <div >
        <p>radio组-设置属性border显示边框</p>
        <e-radio-group
          v-model="disabledGroup">
          <e-radio
            label="金斑蝶"
            disabled
            border></e-radio>
          <e-radio
            label="爪哇犀牛"
            border></e-radio>
          <e-radio
            label="印度黑羚"
            border></e-radio>
        </e-radio-group>
      </div>
    </div> -->
    <!-- <div class="demo-inner-divider">raido组-垂直</div>
    <div class="radio">
      <div >
        <p>radio组-垂直</p>
        <e-radio-group
          v-model="disabledGroup"
          vertical>
          <e-radio
            label="金斑蝶"
            disabled></e-radio>
          <e-radio label="爪哇犀牛"></e-radio>
          <e-radio label="印度黑羚"></e-radio>
        </e-radio-group>
      </div>
    </div> -->
    <radio-md class="markdown-body"></radio-md>
  </div>
</template>
<script>
import radioMd from '../../docs/radio.md';
export default {
  name: 'DemoCheckboxAndRadio',
  components: {
    radioMd
  },
  data () {
    return {
      disabledGroup: '爪哇犀牛',
      button1: '北京',
      single: true
    }
  }
}
</script>
<style scoped>
.radio{
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.radio > div{
    margin-right: 50px ;
  }
.radio p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}
</style>
